<template>
    <div id="box1">
        <div id="box">
            <h2>{{city}}</h2>
            <el-input
                    placeholder="请输入城市"
                    v-model="input_city"
                    style="width: 300px;"
                    clearable>
            </el-input>
            <el-button @click="sousuo">搜索城市</el-button>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="267">
                </el-table-column>
                <el-table-column
                        prop="high"
                        label="高温"
                        width="266">
                </el-table-column>
                <el-table-column
                        prop="low"
                        label="低温"
                        width="266"
                >
                </el-table-column>
            </el-table>
            <el-row>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="cursor"
                        :total="page_all">
                </el-pagination>
            <el-col :span="24" class="temperature-chart">
                <div>
                    <h5>温度趋势图</h5>
                    <ve-line :data="chartData"></ve-line>
                </div>
            </el-col>
        </el-row>
        </div>

    </div>

</template>

<script>
    import VeLine from 'v-charts/lib/line.common'
    export default {
        components:{VeLine},
        name: "weather",
        data:function(){
            return{
                input_city:'',
                city:'',
                list:'',
                one_page:3,
                page_all:40,
                tableData: [{
                    date: '',
                    high: '',
                    low: '',
                }],chartData: {
                    columns: ['日期', '高温', '低温'],
                    rows: [

                    ]
                }

            }
        },
        mounted() {
                // this.page_all = (7/this.one_page)*10;
                var _this=this;
                this.axios.get('api/weather/').then(function(response){
                    _this.city = response.data['city'];
                    _this.list = response.data.res;
                    _this.page_all = (_this.list.length/_this.one_page)*10;
                var list = _this.list.slice(0,_this.one_page);
                var list_tu = response.data.res;
                for(var i=0;i<list.length;i++){
                   var new_data={date:list[i]['date'],high:list[i]['tem1'],low:list[i]['tem2']};
                   _this.$set(_this.tableData,i,new_data);
                }
                for(var i=0;i<list_tu.length;i++){
                    var new_tem={'日期':list_tu[i]['date'],'高温':parseInt(list_tu[i]['tem1']),'低温':parseInt(list_tu[i]['tem2'])};
                    _this.$set(_this.chartData.rows,i,new_tem);
                }
         })
        },
        methods:{
            cursor:function(page){
                var list = this.list.slice(this.one_page*(page-1),this.one_page*page);
                var new_list = [];
                for(var i=0;i<list.length;i++){
                    var new_data={date:list[i]['date'],high:list[i]['tem1'],low:list[i]['tem2']};
                    new_list.push(new_data);
                }
                this.tableData = new_list;
            },
            sousuo:function(){
                var _this = this;
                this.axios.post('/api/weather/'+"?city="+_this.input_city).then(
                    function(response){
                    _this.city = response.data['city'];
                    _this.list = response.data.res;
                    var list = _this.list.slice(0,_this.one_page);
                    var list_tu = response.data.res;
                    for(var i=0;i<list.length;i++){
                        var new_data={date:list[i]['date'],high:list[i]['tem1'],low:list[i]['tem2']};
                        _this.$set(_this.tableData,i,new_data);
                    }
                    for(var i=0;i<list_tu.length;i++) {
                        var new_tem = {
                            '日期': list_tu[i]['date'],
                            '高温': parseInt(list_tu[i]['tem1']),
                            '低温': parseInt(list_tu[i]['tem2'])
                        };
                        _this.$set(_this.chartData.rows, i, new_tem);
                    }})
            }
        }
    }
</script>

<style scoped>
    #box{
        width: 800px;
        margin: 0 auto;
    }
</style>